<template>
    <div class="Layout">
        <div class="AddButton TagButton" @click="AddFileStatus = true">
            <PlusOutlined />
        </div>
        <div class="Tags" ref="fileSel" @wheel="horizontalScroll">
            <div class="Tags-Item" :class="{
                active: value.active,
                hidden: value.hidden
            }" v-for="(value, key) in CodeEditor.state" @click="SetActive(key)">
                <div class="Tags-Body">
                    <span class="suffix" :class="GetSuffix(value.suffix)"></span>
                    <span>{{ key }}</span>
                    <span @click.stop style="padding:0">
                        <a-popconfirm title="是否删除文件？" ok-text="Yes" cancel-text="No" @confirm="DeleteFile(key)">
                            <CloseOutlined class="close" v-if="value.save" />
                            <span v-if="!value.save" class="anticon save">●</span>
                        </a-popconfirm>
                    </span>
                </div>
            </div>
        </div>
        <div class="AddFileInput" :style="{
            left: AddFileStatus ? '0px' : '-100%'
        }">
            <a-space :size="10">
                <span class="suffix FileSuffix" :class="FileSuffix"></span>
                <a-input v-model:value="AddFileName" @pressEnter="AddFile" size="small" placeholder="请输入文件名" />
                <a-button size="small" type="primary" @click="AddFile">确定</a-button>
                <a-button size="small" @click="ClearAddFileName">取消</a-button>
            </a-space>
        </div>
        <div class="RunButton TagButton" @click="CodeEditor.RunderPage">
            <SendOutlined />
            <span> Run</span>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { CloseOutlined, PlusOutlined, SendOutlined } from '@ant-design/icons-vue';
import { ref, watch } from 'vue'
import { CodeEditor } from './Store'
import { notification } from 'ant-design-vue';

const suffixArray = ['vue', 'js', 'ts', 'css', 'html'];

function GetSuffix(suffix: string) {
    if (suffixArray.includes(suffix)) {
        return suffix;
    } else {
        return 'other'
    }
}

const fileSel = ref(null);

function SetActive(key: string) {
    CodeEditor.SetActive(key);
}

function horizontalScroll(e: WheelEvent) {
    e.preventDefault()
    const el = fileSel.value! as HTMLElement
    const direction =
        Math.abs(e.deltaX) >= Math.abs(e.deltaY) ? e.deltaX : e.deltaY
    const distance = 30 * (direction > 0 ? 1 : -1)
    el.scrollTo({
        left: el.scrollLeft + distance
    })
}



const AddFileStatus = ref(false);
const AddFileName = ref('');
const FileSuffix = ref('other');

function ClearAddFileName() {
    AddFileName.value = '';
    AddFileStatus.value = false;
}

function FormatSuffix(val: string): string {
    var nameArr = val.split('.');
    if (nameArr.length <= 1) {
        return 'other'
    };
    var suffix = nameArr.pop()!;
    if (suffixArray.includes(suffix)) {
        return suffix;
    } else {
        return 'other'
    };
}

function DeleteFile(val: string) {
    CodeEditor.deleteFile(val);
}

watch(AddFileName, (val) => {
    FileSuffix.value = FormatSuffix(val);
})

function AddFile() {
    if (AddFileName.value) {
        var nameArr = AddFileName.value.split('.');
        if (nameArr.length > 1) {
            CodeEditor.AddFile(AddFileName.value, '', false);
            ClearAddFileName();
        } else {
            notification.warning({
                message: '请检查文件后缀名'
            });
        };
    } else {
        notification.warning({
            message: '请输入文件名'
        });
    }
}



</script>
<style lang="less" scoped>
.suffix {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

.FileSuffix {
    transform: translateY(3px);
}

.SelectValue {

    span {
        vertical-align: middle;
    }
}

:deep(.ant-select-selection-item) {
    span {
        vertical-align: middle;
    }
}

.AddFileInput {
    position: absolute;
    left: -100%;
    right: 80px;
    height: 35px;
    max-width: 400px;
    z-index: 99;
    background-color: #333;
    box-shadow: 0 0 10px rgba(0, 0, 0, 1);
    display: flex;
    padding: 0 10px;
    transition: all 0.3s;
}

.suffix.vue {
    background-image: url(./icon/vue.png);
}

.suffix.js {
    background-image: url(./icon/js.png);
}

.suffix.ts {
    background-image: url(./icon/ts.png);
}

.suffix.css {
    background-image: url(./icon/css.png);
}

.suffix.html {
    background-image: url(./icon/html.png);
}

.suffix.other {
    background-image: url(./icon/other.png);
}

.Layout {
    width: 100%;
    height: 35px;
    user-select: none;
}

.TagButton {
    position: absolute;
    top: 0;
    text-align: center;
    line-height: 35px;
    background-color: #222;
    border-right: 1px solid #222;
    color: rgb(40, 146, 233);
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
        color: rgb(72, 167, 245);
        background-color: #151515;
    }
}

.AddButton {
    left: 0;
    width: 35px;
    height: 35px;
}

.RunButton {
    right: 0;
    width: 80px;
    height: 35px;
}

.Tags {
    display: flex;
    box-sizing: border-box;
    position: absolute;
    height: 35px;
    left: 35px;
    right: 80px;
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
    background-color: #111;

    &::-webkit-scrollbar {
        height: 2px;
    }

    &::-webkit-scrollbar-track {
        background-color: transparent;
    }

    &::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.2);
    }

    &-Body{
        display: flex;
        height: 35px;
        align-items: center;
    }

    &-Item {
        display: inline-block;
        font-size: 13px;
        cursor: pointer;
        box-sizing: border-box;
        background-color: #2d2d2d;
        color: #ccc;
        padding: 0 3px 0 13px;
        border-right: 1px solid #252526;

        .save {
            transform: translateY(-2px);
            font-size: 16px;
            padding-right: 13px;
        }

        .close {
            transform: translateY(-1px);
        }

        :deep(.anticon.close) {
            opacity: 0;
        }

        &:hover {
            :deep(.anticon) {
                opacity: 1;
            }
        }

        &.active {
            color: #BBB;
            background-color: #1e1e1e;
            border-right: 1px solid #1e1e1e;

            :deep(.anticon) {
                opacity: 1;
            }
        }

        &.hidden {
            display: none;
        }

        span {
            vertical-align: middle;
            padding: 0 10px 0 0;
        }
    }

}
</style>